<template>
  <div class="order-list-page">
    <div class="order-list">
      <div class="order-item" v-for="order in orders" :key="order.orderId">
        <div class="order-header">
          <span class="order-number">订单号: {{ order.orderNumber }}</span>
          <span class="order-status">{{ formatStatus(order.status) }}</span>
        </div>
        
        <div class="order-info">
          <div class="info-row">
            <span>配送时间: {{ order.deliveryTimeWindow }}</span>
          </div>
          <div class="info-row">
            <span>配送地点: {{ order.deliveryLocation }}</span>
          </div>
          <div class="info-row">
            <span>联系人: {{ order.contactName }} {{ order.contactPhone }}</span>
          </div>
        </div>
        
        <div class="order-footer">
          <span class="total-amount">¥{{ order.totalAmount.toFixed(2) }}</span>
          <span class="order-date">{{ formatDate(order.createdAt) }}</span>
        </div>
      </div>

      <div class="empty-state" v-if="orders.length === 0 && !loading">
        <p>暂无订单</p>
      </div>

      <div class="loading" v-if="loading">
        <p>加载中...</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      orders: [],
      loading: false,
      userId: null
    };
  },
  created() {
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      try {
        this.loading = true;
        // 从本地存储获取用户ID，实际项目中可能需要从登录状态获取
        this.userId = localStorage.getItem('userId');
        
        if (!this.userId) {
          console.error('用户未登录');
          return;
        }
        const response = await axios.post(`http://localhost:8081/orders/list/${this.userId}`);
        console.log(response)
        const data = await response.data;
        this.orders = data.data || [];
      } catch (error) {
        console.error('获取订单列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    formatStatus(status) {
      const statusMap = {
        'pending': '待接单',
        'preparing': '备餐中',
        'ready': '出餐完成',
        'delivering': '配送中',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    },
    
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    }
  }
};
</script>

<style>
.order-list-page {
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.order-number {
  font-size: 14px;
  color: #333;
}

.order-status {
  font-size: 12px;
  color: #1890ff;
}

.order-info {
  margin-bottom: 8px;
}

.info-row {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.total-amount {
  font-size: 15px;
  font-weight: bold;
  color: #ff6b00;
}

.order-date {
  font-size: 12px;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}
</style>